<template>
  <div class="container">
    <div class="cut"></div>
    <div class="bg-blue">
      <el-row>
        <el-col class="skl2" :span="5">
          <el-card class="box-card" @click="evaluation(1)">
            <template #header>
              <div class="card-header">
                <span style="font-size: 30px; color: black">盈利类</span>
              </div>
            </template>
            <el-row>
              <el-col :span="24">
                <img class="index-img" src="../../img/index1.png" />
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col class="skl4" :span="5">
          <el-card class="box-card" @click="evaluation(2)">
            <template #header>
              <div class="card-header">
                <span style="font-size: 30px; color: black">负债类</span>
              </div>
            </template>
            <el-row>
              <el-col :span="24">
                <img class="index-img" src="../../img/index2.png" />
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="skl2" :span="5">
          <el-card class="box-card" @click="evaluation(3)">
            <template #header>
              <div class="card-header">
                <span style="font-size: 30px; color: black">营运类</span>
              </div>
            </template>
            <el-row>
              <el-col :span="24">
                <img class="index-img" src="../../img/index3.png" />
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col class="skl4" :span="5">
          <el-card class="box-card" @click="evaluation(4)">
            <template #header>
              <div class="card-header">
                <span style="font-size: 30px; color: black">增长类</span>
              </div>
            </template>
            <el-row>
              <el-col :span="24">
                <img class="index-img" src="../../img/index4.png" />
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="cut"></div>
  </div>
</template>

<script>
import router from "@/router";
import "../../css/jquery.bxslider.css";
import "../../css/font-awesome.min.css";
import "../../css/bootstrap.min.css";
import "../../css/animate.css";
import "../../css/style.css";

export default {
  data() {
    return {};
  },
  methods: {
    evaluation(key) {
      switch (key) {
        case 1:
          router.push(`/evaluation_indexA`);
          break;
        case 2:
          router.push(`/evaluation_indexB`);
          break;
        case 3:
          router.push(`/evaluation_indexC`);
          break;
        case 4:
          router.push(`/evaluation_indexD`);
          break;
        default:
          console.log(key);
      }
    },
  },
};
</script>

<style>
.intro {
  color: #ffffff;
  font-size: 20px;
}
.bg-blue {
  padding: 20px 0 30px 0;
  background-color: #ecf5ff;
}
.skl2 {
  padding: 10px;
  margin-left: 5%;
}
.skl4 {
  padding: 10px;
  margin-left: 25%;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: 480px;
  margin-top: 20px;
}

.el-card {
  min-width: 400px;
  max-width: 600px;
  margin-right: 20px;
  transition: all 0.5s;
  cursor: pointer;
}
.el-card:hover {
  width: 500px;
  margin-top: -10px;
}
.index-img {
  width: 100%;
  height: 100%;
}
</style>
